Android - Composable function

原有程式碼抽取為 Composable Function

• 開啟 MainActivity.kt，目的為將先前章節建立的 Compose UI 內容抽取為function，選取下方 setContent {...} 中的程式碼，點選右鍵 →「Refactor」→「Function」

  class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContent {
          //將下列UI元件抽取為Composable function
          Box(
              modifier = Modifier
                  .fillMaxSize(),
              contentAlignment = Alignment.Center
          ) {
              Text(
                  text = "Hello World!"
              )
          }
      }
    }
  }
  

  

• 上個階段的程式碼已被抽取為 Composable Function 並暫以綠底標註，按 Enter 鍵完成（若取消則按 Esc 鍵返回）

  

• Composable Function 命名規則為大駝峰，故更變預設 function 名稱：

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        //更變 Composable Function 名稱
        Greeting()　
    }
  }
  
  @Composable
  private fun Greeting() { //更變 Composable Function 名稱
      Box(
          modifier = Modifier
              .fillMaxSize(),
          contentAlignment = Alignment.Center
      ) {
          Text(
              text = "Hello World!"
          )
      }
  }
  

• 預覽 Composable Function：

  新增包含 Annotation @Preview 的 Composable Function

  @Preview(showBackground = true)
  @Composable
  private fun GreetingPreview() {
      Greeting()
  }
  

  點選「Split」預覽畫面：

  

• 啟動專案：畫面如預期呈現